<template>
    <div class="goods-image" v-if="imgarr">
      <div
        class="large"
        :style="[{ backgroundImage: `url(${imgarr[nowindex]})` }, imgobj]"
        v-show="show"
      ></div>
      <div
        class="middle"
        ref="middle"
        v-if="imgarr"
        @mouseenter="show = true"
        @mouseleave="show = false"
        @mousemove="move($event)"
      >
  
        <img :src="imgarr[nowindex]" alt="" />
        <div class="cover" :style="coverobj" v-show="show" ref="cover"></div>
      </div>
      <ul class="small">
        <li
          v-for="(item, key) in imgarr"
          :key="key"
          :class="{ active: nowindex == key }"
        >
          <img @mouseenter="nowindex = key" :src="item" />
        </li>
      </ul>
    </div>
  </template>
  
  <script>
  export default {
    props: ["imgarr"],
  
    data() {
      return {
        nowindex: 0, //定义的下标
        show: false, //控制色块和大图显示与隐藏
        coverobj: { top: "0", left: "0" }, //色块的位置
        imgobj: { backgroundPositionX: "0", backgroundPositionY: "0" }, //设置图像位置
      };
    },
  
    mounted() {},
  
    methods: {
      //思路 第一步 我们获取到middle dom对象和遮罩的dom对象  初步的算出我们鼠标移动盒子的中心距离
      move(e) {
        //第一步 我们获取到middle dom对象和遮罩层的dom对象
        let mid = this.$refs.middle;
        let cover = this.$refs.cover;
        // 初步设置x的坐标位置  获取mid的offset的时候注意是要获取从当前元素到根元素body的所有offset的和
        let x = e.pageX - this.getLeft(mid) - cover.offsetWidth / 2;
        let y = e.pageY - this.getTop(mid) - cover.offsetHeight / 2;
        //x取值最大值
        let maxx = mid.offsetWidth - cover.offsetWidth;
        let maxy = mid.offsetHeight - cover.offsetHeight;
        //x的范围限制
        if (x <= 0) {
          x = 0;
        } else if (x >= maxx) {
          x = maxx;
        }
        //y的范围限制
        if (y <= 0) {
          y = 0;
        } else if (y >= maxy) {
          y = maxy;
        }
        //控制coverobj  x轴  y轴
        this.coverobj.left = x + "px";
        this.coverobj.top = y + "px";
        //在控制大图
        this.imgobj.backgroundPositionX = -(x * 2) + "px";
        this.imgobj.backgroundPositionY = -(y * 2) + "px";
      },
      //用递归的方式来获取当前元素的offsetLeft
      //获取当前元素到左边的距离
      getLeft(obj) {
        let left = obj.offsetLeft;
        if (obj.offsetParent != null) {
          left += this.getLeft(obj.offsetParent);
        }
        return left;
      },
      //获取当前元素到顶部的距离
      getTop(obj) {
        let top = obj.offsetTop;
        if (obj.offsetParent != null) {
          top += this.getTop(obj.offsetParent);
        }
        return top;
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  @import "@/assets/css/color.scss";
  .goods-image {
    width: 480px;
    height: 400px;
    position: relative;
    display: flex;
    .middle {
      width: 400px;
      height: 400px;
      background: #f5f5f5;
      position: relative;
      cursor: move;
      .cover {
        width: 200px;
        height: 200px;
        background: rgba(0, 0, 0, 0.2);
        left: 0;
        top: 0;
        position: absolute;
        z-index: 999;
      }
    }
    .small {
      width: 80px;
      li {
        width: 68px;
        height: 68px;
        margin-left: 12px;
        margin-bottom: 15px;
        cursor: pointer;
        &:hover,
        &.active {
          border: 2px solid $xtxColor;
        }
      }
    }
    z-index: 500;
    .large {
      position: absolute;
      top: 0;
      left: 412px;
      width: 400px;
      height: 400px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      background-repeat: no-repeat;
      background-size: 800px 800px;
      background-color: #f8f8f8;
    }
  }
  </style>